<template>
  <!-- 头部组件 -->
  <Header msg="头部分" @refreshParent="refreshParent" class="fixed-header" />

  <!-- 主内容区域 -->
  <div ref="targetDiv" class="ycnz " >
   
    <div class="dark_bgcolor2">
      <div class="zjneiron dark_word Pur_all ">
      <!-- 顶部会员套餐展示 -->
      <div class="Pur_top">
        <el-row :gutter="50">
          <el-col :span="4">
            </el-col>
          <el-col :span="6">
            <div class="dark_bgcolor Pur_topbg">
              <div class="title">普通会员VIP</div>
              <div class="price"><span>￥</span><span class="price-value">28</span><span>/月 起</span></div>
              <div class="discount"><el-text tag="del" style="color:#F56C6C;">￥38</el-text></div>
              <ul class="features " style="margin-left: 25px;">
                <li><el-text class="dark_word">✔ 83款 VIP声音</el-text></li>
                <li><el-text class="dark_word">✔ 无损音质文件</el-text></li>
                <li><el-text class="dark_word">✔ 作品管理</el-text></li>
                <li><el-text class="dark_word">✔ 4款创作工具</el-text></li>
              </ul>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="dark_bgcolor Pur_topbg">



              <div class="title">超级会员SVIP<span class="subtitle">[个人版]</span></div>
              <div class="price"><span>￥</span><span class="price-value">38</span><span>/月 起</span></div>
              <div class="discount"><el-text tag="del"  style="color:#F56C6C;">￥78</el-text></div>
              <div class="action"><el-button type="primary" class="top_but" @click="dialogVisible = true">立刻开通</el-button></div>
              <div>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <ul class="features " >
                <li><el-text class="dark_word">✔ 83款 VIP声音</el-text></li>
                
                <li><el-text class="dark_word">✔ 541款 SVIP声音</el-text></li>
             
                <li><el-text class="dark_word">✔ 绿幕视频</el-text></li>

                <li><el-text class="dark_word">✔ 7款创作工具</el-text></li>
              </ul>
                  </el-col>
                  <el-col :span="12">
                    <ul class="features ">
                
                <li><el-text class="dark_word">✔ 情感声音</el-text></li>
             
                <li><el-text class="dark_word">✔ 20W情感字符</el-text></li>
   
                <li><el-text class="dark_word">✔ 作品管理</el-text></li>
           
              </ul>
                  </el-col>
                 
                </el-row>

              </div>
              
            </div>

          </el-col>
         
        </el-row>
      </div>

      <!-- 中间功能对比清单 -->
      <div class="Pur_mid">
        <div>
          <h1>功能对比清单</h1>
        </div>
        <div class="title">声音模型 · 创作工具 · 团队协作等服务对比</div>
        <div class="dark_bgcolor"> 
          <VipTable  msg="头部分"  />
        </div>
      </div>
       
      <!-- 底部留白 -->
      <div style="height: 80px;"></div>
    </div>
    </div>

  </div>

  <!-- 底部组件 -->
  <Footer msg="脚部分" />
  <Up_module msg="回到顶部"></Up_module>

  
  <el-dialog
    v-model="dialogVisible"
    title="开通会员"
    width="40%"
    @close="handleClose"
  >
  <Membershippurchase ref="MembershippurchaseRef"  msg="头部分"  />
  </el-dialog>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { Moon, Sunny, Headset, Download, VideoCameraFilled, Document, Upload, VideoPlay } from '@element-plus/icons-vue';
import Footer from '../components/footer.vue';
import Header from '../components/header.vue';
import Up_module from '../components/up_module.vue';
import VipTable from '../Purchasemembership/vipTable.vue';
import Membershippurchase from '../Purchasemembership/Membershippurchase.vue';
import "../components/css/Homepage.css";

export default {
  components: {
    Footer,
    Header,
    Up_module,
    VipTable,
    Membershippurchase,
    Moon,
    Sunny,
    Headset,
    Download,
    VideoCameraFilled,
    Document,
    Upload,
    VideoPlay
  },
  setup() {
    const isDarkMode = ref(false);
    const targetDiv = ref(null);
    const textarea = ref('');
    const dialogVisible = ref(false)
    // 获取会员购买组件
    const MembershippurchaseRef = ref(null)
    // 获取cookie中的夜间模式设置
    function getCookie(name) {
      const nameEQ = name + "=";
      const ca = document.cookie.split(';');
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
      }
      return null;
    }

    // 初始化时设置默认主题
    onMounted(() => {
      const user = getCookie('nightMode');
      if (user === '') {
        targetDiv.value.className = "light";
      } else {
        targetDiv.value.className = user;
      }
    });

    // 刷新父组件的方法
    function refreshParent() {
      const user = getCookie('nightMode');
      if (user === '') {
        targetDiv.value.className = "light";
      } else {
        targetDiv.value.className = user;
      }
    }

    // 关闭对话框,清除定时器
    function handleClose(){
      if(MembershippurchaseRef.value){
        MembershippurchaseRef.value.closeDialog();
      }
    }

    return {
      isDarkMode,
      Headset,
      Document,
      Download,
      VideoCameraFilled,
      Moon,
      Sunny,
      targetDiv,
      textarea,
      VideoPlay,
      refreshParent,
      dialogVisible,
      MembershippurchaseRef,
      handleClose
    };
  }
};
</script>

<style scoped>

/* 主内容区域样式 */
.ycnz {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 内容容器样式 */
.zjneiron {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 会员套餐容器样式 */
.Pur_all {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* 顶部会员套餐展示样式 */
.Pur_top {
  padding: 180px 0;
}

/* 会员套餐背景样式 */
.Pur_topbg {
  text-align: center;
  height: 420px;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 添加外阴影 */
}

/* 中间功能对比清单样式 */
.Pur_mid {
  text-align: center;
}

/* 标题样式 */
.title {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 10px;
}

/* 副标题样式 */
.subtitle {
  font-size: 15px;
}

/* 价格样式 */
.price {
  font-size: 25px;
  margin-bottom: 10px;
}

/* 价格数值样式 */
.price-value {
  font-size: 25px;
}

/* 折扣样式 */
.discount {
  margin-bottom: 20px;
}

/* 功能列表样式 */
.features {
  list-style-type: none;
  padding: 0;
  margin:0px 10px;
  text-align: left;

}

/* 功能列表项样式 */
.features li {
  margin: 5px 0;
}

/* 操作按钮样式 */
.action {
  margin: 20px 0;
}

/* 顶部按钮样式 */
.top_but {
  width: 100%;
}

/* 光明模式样式 */
.light {
  background-color: white;
  color: black;
}

/* 暗黑模式样式 */
.dark {
  background-color: #333;
  color: white;
}
</style>